﻿/**
* cropper.js v0.0.1
* Image Cropper for Umbraco 5 - released under MIT License
* Copyright (c) 2012 Dirk Seefeld
* http://imagecropperumbraco5.codeplex.com/
* based on jQuery Image Cropping Plugin - released under MIT License
*/
function Cropper(id, x_id, y_id, width_id, height_id) {
	this.Id = id;
	this.Input_x_id = x_id;
	this.Input_y_id = y_id;
	this.Input_width_id = width_id;
	this.Input_height_id = height_id;

	this.initCropper = initCropper;

	function initCropper() {
		var Input_x_id = this.Input_x_id;
		var Input_y_id = this.Input_y_id;
		var Input_width_id = this.Input_width_id;
		var Input_height_id = this.Input_height_id;
		var ration = 0;
		var boundx = 0;
		var boundy = 0;
		var jcrop_api;
		var $cropper = $(this.Id);
		var $target = $('img.target', $cropper);
		var $previewContainer = $('div.previewContainer', $cropper);
		var $preview = $('div.previewContainer img', $cropper);
		$preview.css({ 'display': 'block' });
		var $info = $('div.cropInfo', $cropper);
		var previewWidth = $previewContainer.data("width");
		var previewHeight = $previewContainer.data("height");
		var position = $previewContainer.data("position");
		var constraint = $previewContainer.data("constraint");
		var targetWidth = 0;
		var targetHeight = 0;
		var targetRatio = 0;
		var previewRatio = 0;

		if (previewHeight > 0) {
			previewRatio = previewWidth / previewHeight;
		}
		if (previewWidth > 0) $previewContainer.css({ width: previewWidth + 'px' });
		else $previewContainer.css({ width: $target.width() + 'px' });
		if (previewHeight > 0) $previewContainer.css({ height: previewHeight + 'px' });
		else $previewContainer.css({ height: $target.height() + 'px' });

		targetWidth = $target.width();
		targetHeight = $target.height();
		if (targetHeight > 0) {
			targetRatio = targetWidth / targetHeight;
		}
		constraint = constraint && previewRatio > 0;

		var selX = parseInt($(Input_x_id).val());
		var selY = parseInt($(Input_y_id).val());
		var selX2 = selX + parseInt($(Input_width_id).val());
		if (selX2 == 0) selX2 = targetWidth;
		var selY2 = selY + parseInt($(Input_height_id).val());
		if (selY2 == 0) selY2 = targetHeight;

		var xPos = position.substr(0, 1);
		var yPos = position.substr(1, 1);

		if (parseInt($(Input_width_id).val()) == 0) {
			//initial values
			if (constraint && previewRatio > 0) {
				selX2 = previewWidth;
				selY2 = previewHeight;
				if (previewRatio < 1) {
					//landscape or square
					cWidth = Math.round(targetHeight * previewRatio);

					if (xPos == 'C') {
						selX = Math.round((targetWidth - cWidth) / 2);
					} else if (xPos == 'R') {
						selX = targetWidth - cWidth;
					}
					selX2 = selX + cWidth;
				} else {
					//portrait
					cHeight = Math.round(targetWidth / previewRatio);
					if (yPos == 'M') {
						selY = Math.round((targetHeight - cHeight) / 2);
					} else if (yPos == 'B') {
						selY = targetHeight - previewHeight;
					}
					selY2 = selY + cHeight;
				}
			} else if (constraint) {
				if (previewWidth > 0) selX2 = previewWidth;
				if (previewHeight > 0) selY2 = previewHeight;
			}
		}

		if (debugImageCropper) {
			//alert(this.Id + "\n" + selX + "," + selY + "," + selX2 + "," + selY2);
		}
		if (constraint && previewRatio > 0) {
			$target.Jcrop({
				onChange: updatePreview,
				onSelect: updatePreview,
				setSelect: [selX, selY, selX2, selY2],
				aspectRatio: previewRatio,
				allowSelect: false
			}, function () {
				var bounds = this.getBounds();
				boundx = bounds[0];
				boundy = bounds[1];
				jcrop_api = this;
			});
		}
		else {
			$target.Jcrop({
				onChange: updatePreview,
				onSelect: updatePreview,
				setSelect: [selX, selY, selX2, selY2],
				allowSelect: false
			}, function () {
				var bounds = this.getBounds();
				boundx = bounds[0];
				boundy = bounds[1];
				jcrop_api = this;
			});
		}

		function updatePreview(c) {
			var infoColor = "#090";
			if (parseInt(c.w) > 0) {
				var rx;
				var ry;
				if (constraint || previewRatio > 0) {

					rx = previewWidth / c.w;
					ry = previewHeight / c.h;
				}
				else {
					if (previewWidth > 0) {
						rx = previewWidth / c.w;
						ry = rx;
						$previewContainer.css({ height: Math.round(c.h * rx) + 'px' });
					} else {
						ry = previewHeight / c.h;
						rx = ry;
						$previewContainer.css({ width: Math.round(c.w * rx) + 'px' });
					}
				}
				if (boundx == 0) boundx = targetWidth;
				if (boundy == 0) boundy = targetHeight;

				var pWidth = Math.round(rx * boundx);
				var pHeight = Math.round(ry * boundy);
				$preview.css({
					width: pWidth + 'px',
					height: pHeight + 'px',
					marginLeft: '-' + Math.round(rx * c.x) + 'px',
					marginTop: '-' + Math.round(ry * c.y) + 'px'
				});
				$previewContainer.css({ 'border': '1px solid green' });
				infoColor = "#090";
				if (pHeight > boundy || pWidth > boundx) {
					if (previewRatio == 0 || constraint || rx != ry) {
						$previewContainer.css({ 'border': '1px solid red' });
						infoColor = "#c00";
					}
				}
			}
			//update form input values
			$(Input_x_id).val(Math.round(c.x));
			$(Input_y_id).val(Math.round(c.y));
			$(Input_width_id).val(Math.round(c.w));
			$(Input_height_id).val(Math.round(c.h));

			var infoText = "x: " + Math.round(c.x) + "; y: " + Math.round(c.y) + "; width: " + Math.round(c.w) + "; height: " + Math.round(c.h);
			if (debugImageCropper) {
//				infoText += "<br /><br />aspectRatio: " + ration;
//				infoText += "<br />crop width: " + previewWidth + " height:" + previewHeight;
//				infoText += "<br />constraint: " + constraint;
//				infoText += "<br />targetRatio: " + targetRatio;
//				infoText += "<br />previewRatio: " + previewRatio;
			}

			$info.html(infoText).css({ color: infoColor });
		};
	}
}